<script lang="ts" setup>
import { ref , computed} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import * as Api from '@/api/sy'
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const role = JSON.parse(localStorage.getItem("role"))
import {onMounted} from "vue";
import * as echarts from 'echarts';
const isrole = ref('true')
onMounted(()=>{
  if (role === '老师'){
    isrole.value = false
  }
  var myChart1 = echarts.init(document.getElementById('sj'));
  let option1 = {
    // title: {
    //   text: '近四年通过人数'
    // },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [  '计科院', '商学院', '外国语学院','智能制造学院','城建学院','电气学院','环药学院']
    },
    xAxis: {
      data: ['2022年', '2023年', '20242年', '2025年']
    },
    yAxis: {},
    series: [

      {
        name: '计科院',
        type: 'line',

        data: [692, 604,567, 654]
      },
      {
        name: '商学院',
        type: 'line',

        data: [345, 654, 301, 334]
      },
      {
        name: '外国语学院',
        type: 'line',

        data: [862, 556, 701, 684]
      },
      {
        name: '智能制造学院',
        type: 'line',

        data: [443, 456, 401, 346]
      },

      {
        name: '城建学院',
        type: 'line',

        data: [346, 387, 351, 379]
      },
      {
        name: '电气学院',
        type: 'line',

        data: [402, 478, 467, 491]
      },
      {
        name: '环药学院',
        type: 'line',

        data: [387, 365, 371, 394]
      },
    ]
  };
  const gaugeData1 = [
    {
      value: 64,
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '20%']
      }
    }
  ];
  let option2 = {
    title: {
      text: '全校通过率'
    },
    series: [
      {
        type: 'gauge',
        max: 100,
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
        },
        axisLine: {
          lineStyle: {
            width: 20
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: gaugeData1,
        title: {
          fontSize:10
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 18,
          color: 'inherit',
          formatter: '{value}%'
        }
      }
    ]
  };
  myChart1.setOption(option1);
  var myChart3 = echarts.init(document.getElementById('lj'));
  let option3 = {
    // title: {
    //   text: '近四年通过人数:',
    //   size: 5,
    // },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [  '计科院', '商学院', '外国语学院','智能制造学院','城建学院','电气学院','环药学院']
    },
    xAxis: {
      data: ['2022', '2023', '2024', '2025']
    },
    yAxis: {},
    series: [
      {
        name: '计科院',
        type: 'line',

        data: [692, 604,567, 654]
      },
      {
        name: '商学院',
        type: 'line',

        data: [345, 654, 301, 334]
      },
      {
        name: '外国语学院',
        type: 'line',

        data: [862, 556, 701, 684]
      },
      {
        name: '智能制造学院',
        type: 'line',

        data: [643, 456, 901, 346]
      },
      {
        name: '环药学院',
        type: 'line',

        data: [486, 456, 452, 530]
      },
      {
        name: '城建学院',
        type: 'line',

        data: [486, 456, 452, 530]
      },
      {
        name: '电气学院',
        type: 'line',

        data: [486, 456, 452, 530]
      },
    ]
  };
  myChart3.setOption(option3)
  const gaugeData2 = [
    {
      value: 24,
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '20%']
      }
    }
  ];

})
const items = ref([])
onMounted(async () => {
  let result = await Api.list()
  console.log(result.data)
  if (result.code === 200){
    items.value = result.data
  }
})
interface User {
  date: string
  name: string
  address: string
}

const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: User[] = [
  {
    date: '1',
    name: '23外国语学院(1)班',
    address: '472.5',
  },
  {
    date: '2',
    name: '24外国语学院(2)班',
    address: '465.3',
  },
  {
    date: '3',
    name: '23计科(1)班',
    address: '429.5',
  },
  {
    date: '4',
    name: '23智能智造(1)班',
    address: '426.5',
  },
  {
    date: '4',
    name: '23大数据(1)班',
    address: '426.5',
  },
  {
    date: '5',
    name: '23大数据(2)班',
    address: '426',
  },
  {
    date: '6',
    name: '24大数据(1)班',
    address: '425.4',
  },
  {
    date: '7',
    name: '23计科(2)班',
    address: '410.4',
  },
  {
    date: '8',
    name: '24会计(1)班',
    address: '404.3',
  },
  {
    date: '9',
    name: '23大数据(1)班',
    address: '401.8',
  },
  {
    date: '10',
    name: '24计科(2)班',
    address: '389',
  },
  {
    date: '11',
    name: '23智能智造(2)班',
    address: '384.1',
  },
  {
    date: '12',
    name: '23电气(1)班',
    address: '374.5',
  },
  {
    date: '13',
    name: '24智能智造(2)班',
    address: '365.9',
  },
  {
    date: '13',
    name: '24智能智造(2)班',
    address: '364.3',
  },
]
</script>
<template>
  <el-scrollbar style="display: flex;flex-direction: column;height: 100%;">
    <div class="school" style="height: 314px;">
      <div class="xiaohui" style="display: flex;align-items: center">
        <img src="@/image/xiaohui.webp"  style="height: 140px;width: 140px;margin-left: 50px;opacity: 0.8">
        <div style="display:flex;flex-direction: column;margin-left: 10px">
          <div style="color:#2C2D36;font-size: 30px;font-family: 思源黑体">南京理工大学泰州科技技术学院</div>
          <div style="margin-top: 5px">中国江苏省泰州市境内民办高校</div>
          <div style="margin-top: 5px">Nanjing University of Science and Technology Taizhou College</div>
        </div>
      </div>
      <div class="people" style="display: flex;justify-content: space-around;">
        <div class="one" style="width: 250px;height: 150px;background-color:transparent;">
          <p style="font-size: 36px;position: relative;left: 55px;top: 40px;color: #2C2D36;">11586</p>
          <h3 style="position: relative;left: 60px;top: 80px;color: #9B9DA3;font-size: 14px">学生人数</h3>
        </div>
        <div class="one" style="width: 250px;height: 150px;background-color:transparent;">
          <p style="font-size: 36px;position: relative;left: 55px;top: 40px;color: #2C2D36;">231</p>
          <h3 style="position: relative;left: 60px;top: 80px;color: #9B9DA3;font-size: 14px">班级数</h3>
        </div>
        <div class="one" style="width: 250px;height: 150px;background-color:transparent;">
          <p style="font-size: 36px;position: relative;left: 55px;top: 40px;color: #2C2D36;">380</p>
          <h3 style="position: relative;left: 55px;top: 80px;color: #9B9DA3;font-size: 14px">教职工人数</h3>
        </div>
      </div>
    </div>
    <div class="three" style="background-color:#fff;width: 100%;margin-top: 10px;margin-bottom: 10px">
      <el-row :gutter="24">
        <el-col :span="8">
          <div class="statistic-card" style="margin-left: 170px">
            <el-statistic :value="1824">
              <template #title>
                <div style="display: inline-flex; align-items: center;">
                  2024-6四级
                  <el-tooltip
                      effect="dark"
                      content="四级总通过人数较上次比较"
                      placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>比去年</span>
                <span class="green">
              2.06%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card" style="margin-left: 150px">
            <el-statistic :value="628">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  2024-6六级
                  <el-tooltip
                      effect="dark"
                      content="六级总通过人数较上次比较"
                      placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>比去年</span>
                <span class="red">
              0.12%
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card">
            <el-statistic :value="4256" title="比昨天" style="margin-left: 150px">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                 今日活跃人数
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer" style="width: 200px;margin-left: 150px">
              <div class="footer-item">
                <span>比昨日</span>
                <span class="green">
              5.7%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="one">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"style="width: 85%;margin: auto">
        <el-tab-pane label="四级" name="first" style="display: flex;justify-content: space-between;margin-right: 50px">
          <div style="width:500px;height: 550px">
            <el-table :data="filterTableData" height="480" style="width: 550px">
              <el-table-column label="班级成绩排名" prop="date" width="120" />
              <el-table-column label="班级" prop="name" />
              <el-table-column label="平均分" prop="address" width="100"/>
              <el-table-column align="right">
                <template #header>
                  <el-input v-model="search" size="small" placeholder="搜索" />
                </template>
                <template #default="scope">
                  <el-button size="small" type="danger" @click="handleEdit(scope.$index, scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <p style="margin-left: 40px;margin-bottom: 10px ">通过人数：</p>
          <div id="sj" style="width:950px;height: 500px;margin-left: 45px" >
          </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="六级" name="second" style="display: flex;justify-content: space-between">
          <div style="width:500px;height: 550px">
            <el-table :data="filterTableData" height="480" style="width: 550px">
              <el-table-column label="成绩排名" prop="date" width="100" />
              <el-table-column label="班级" prop="name" />
              <el-table-column label="班级" prop="address" width="100"/>
              <el-table-column align="right">
                <template #header>
                  <el-input v-model="search" size="small" placeholder="搜索" />
                </template>
                <template #default="scope">
                  <el-button size="small" type="danger" @click="handleEdit(scope.$index, scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="display:flex;flex-direction: column">
          <p style="margin-bottom: 10px;margin-left: 40px ">通过人数：</p>
          <div id="lj" style="width: 900px;height: 500px;margin-left: 45px" ></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

<!--    <div class="two" style="display: flex;justify-content: space-between;border-top: solid 1px rgb(221.7, 222.6, 224.4)">-->
<!--&lt;!&ndash;        <div id="xy"  style="width: 600px;height: 400px ;"></div>&ndash;&gt;-->
<!--    </div>-->

  </el-scrollbar>
</template>
<style scoped>
.swiper {
  width: 100%;
  height: 250px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.one {
  width: 100%;
  height: 600px;
  background-color: #FFFFFF;
  border-radius: 20px;
}
.three {
  margin: auto;
  width: 80%;
  height: 140px;
  border-radius: 20px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 40px;
  font-weight: 600;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  width: 400px;
  padding: 20px;

  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
.school{
  /* 使用 linear-gradient 创建渐变背景 */
  background: linear-gradient(to right, #FFFFFF,#EBFFF9, #FCF0FB );
  /* 你可以根据需要调整以下样式 */
  height: 100vh; /* 设置高度为视口高度 */
  //display: flex;
  //align-items: center;
  //justify-content: center;
  //text-align: center;
  color: #333; /* 设置文本颜色 */
  font-family: Arial, sans-serif; /* 设置字体 */
}
</style>
